<template>

        <div class="calculator" v-if="isShow" 
       v-on:keyup.enter="sub"
     @mousedown="move"
        >
            <button  class="toggle-button" >
         
             
             </button>
           
            <div class="results">
              <input class="input" v-model="current" />
            </div>
            <div class="xian">
             
            </div>
            <div class="kuang"> 
                   aa
            </div>
            <div class="desc" 
             @click="eee"

            >x</div>

            <div class="mode" >

              <button class="button " @click="press" :class="{'active':isActive}">(</button>
              <button class="button" @click="press" :class="{isActive}">)</button>
              <button class="button" @click="press">x ²</button>
              <button class="button" @click="press">退格</button>
              <button class="button" @click="press">清除</button>
  
              <button class="button" @click="press">7</button>
              <button class="button" @click="press">8</button>
              <button class="button" @click="press">9</button>
              <button class="button" @click="press">+</button>
              <button class="button" @click="press">*</button>
             
              <button class="button" @click="press">4</button>
              <button class="button" @click="press($event)">5</button>
              <button class="button" @click="press">6</button>
              <button class="button" @click="press">-</button>
              <button class="button" @click="press">/</button>
             
              <button class="button" @click="press">1</button>
              <button class="button" @click="press">2</button>
              <button class="button" @click="press">3</button>
              <button class="button" @click="press">%</button>
              <button class="button" @click="press">±</button>

              <button class="button" @click="press" >0</button>
              <button class="button">00</button>
              <button class="button" @click="press">.</button>
              <button class="button equal-sign" @click="press">=</button>
            </div>
           
          </div>
  
</template>

<script>
import {mapMutation,mapState} from 'vuex'

export default {
    directives: {

    drag: {

      // 指令的定义

      bind: function (el) {

        let op = el;  //获取当前元素

        op.onmousedown = (e) => {

          //算出鼠标相对元素的位置

          let disX = e.clientX - op.offsetLeft;

          let disY = e.clientY - op.offsetTop;

           

          document.onmousemove = (e)=>{

            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

            let left = e.clientX - disX;  

            let top = e.clientY - disY;

            

            //绑定元素位置到positionX和positionY上面

            this.positionX = top;

            this.positionY = left;

         

            //移动当前元素

            op.style.left = left + 'px';

            op.style.top = top + 'px';

          };

          document.onmouseup = (e) => {

            document.onmousemove = null;

            document.onmouseup = null;

          };

        };

      }

    }

  },
  name: 'HelloWorld',
  props:['aa'],
   computed:{
        ...mapState(['isShow'])
    },
  data () {
    return {
      current: '',
      isNav:true,
      isActive:''
   }
  },
created(){
   
 var that=this;
			document.onkeydown=function(e){
				var key=window.event.keyCode;
				if(key==13 ){
          that.sub()
        }
      };
      
 
},
mounted(){
  
  
      },
methods: {
   move(e){

      let op = e.target;    //获取目标元素

       

      //算出鼠标相对元素的位置

      let disX = e.clientX - op.offsetLeft;

      let disY = e.clientY - op.offsetTop;

      document.onmousemove = (e)=>{    //鼠标按下并移动的事件

        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

        let left = e.clientX - disX;  

        let top = e.clientY - disY;

         

        //绑定元素位置到positionX和positionY上面

        this.positionX = top;

        this.positionY = left;

         

        //移动当前元素

        op.style.left = left + 'px';

        op.style.top = top + 'px';

      };

      document.onmouseup = (e) => {

        document.onmousemove = null;

        document.onmouseup = null;

      };

    },
 
  eee(){
    this.$store.commit('show_tishi');
  },
  sub(){
    // console.log(this.aa)
    if(this.aa!=='/login')
     this.$store.commit('show_jianpan');
  },

  press: function press(event) {
    var me = this;
    var key = event.target.textContent;
   console.log(key)
    this.isActive=key;
console.log(this.isActive)

  if (key != '=' && key != '清除' && key != '*' && key != '/' && key != '√' && key != "x ²" && key != "%" && key != "退格" && key != "±" && key != "sin" && key != "cos" && key != "tan" && key != "log" && key != "ln" && key != "x^" && key != "x !" && key != "π" && key != "e" && key != "rad" && key != "∘") {
        me.current += key;

        } else if (key === '=') {
      if (me.current.indexOf('^') > -1) {
          var base = me.current.slice(0, me.current.indexOf('^'));
          var exponent = me.current.slice(me.current.indexOf('^') + 1);
          me.current = eval('Math.pow(' + base + ',' + exponent + ')');
        } else {
          me.current = eval(me.current);
        }
      } else if (key === '清除') {

        me.current = '';
      } else if (key === '*') {

        me.current += '*';
      } else if (key === '/') {

        me.current += '/';
      } else if (key === '+') {

        me.current += '+';
      } else if (key === '-') {

        me.current += '-';
      } else if (key === '±') {

        if (me.current.charAt(0) === '-') {
          me.current = me.current.slice(1);
        } else {
          me.current = '-' + me.current;
        }
      } else if (key === '退格') {

        me.current = me.current.substring(0, me.current.length - 1);
      } else if (key === '%') {

        me.current = me.current / 100;
      } else if (key === 'π') {

        me.current = me.current * Math.PI;
      } else if (key === 'x ²') {

        me.current = eval(me.current * me.current);
      } else if (key === '√') {

        me.current = Math.sqrt(me.current);
      } else if (key === 'sin') {

        me.current = Math.sin(me.current);
      } else if (key === 'cos') {

        me.current = Math.cos(me.current);
      } else if (key === 'tan') {

        me.current = Math.tan(me.current);
      } else if (key === 'log') {

        me.current = Math.log10(me.current);
      } else if (key === 'ln') {

        me.current = Math.log(me.current);
      } else if (key === 'x^') {

        me.current += '^';
      } else if (key === 'x !') {

        var number = 1;
        if (me.current === 0) {
          me.current = '1';
        } else if (me.current < 0) {
          me.current = NaN;
        } else {
          var _number = 1;
          for (var i = me.current; i > 0; i--) {
            _number *= i;
          }
          me.current = _number;
        }
      } else if (key === 'e') {

        me.current = Math.exp(me.current);
      } else if (key === 'rad') {

        me.current = me.current * (Math.PI / 180);
      } else if (key === '∘') {

        me.current = me.current * (180 / Math.PI);
      }
    },
    changeModeEvent: function changeModeEvent() {
      var me = this;
      me.changeMode = !me.changeMode;
    },
    
  }
}
</script>
<style>

/* .hello {
//background: linear-gradient(to right, #85D8CE, #085078);
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-item: center;
} */
/* .button:hover{
    background: red;
} */
.active {
   background-color: red;
  }
.xian{
      position: absolute;
    height: 33px;
    width: 100%;
    border-bottom: 1px solid;
    
    /* margin: 8px; */
    /* padding: 17px; */
    top: 94px;
    left: 0px;
}
.ca-name{
  font-size: 15px;
}
.kuang{
  height: 25px;
  width: 93px;
  background: #220707;
  margin: 30px;
  margin-left: 11px;
margin-top: 28px;
  border-radius: 3px;
  border:2px solid;
}
.calculator {
  box-shadow: 0 0 15px black;
  height: 450px;
  position: absolute;
  border: 2px solid #141414;
  border-radius:8%;
  top:35%;
  left:40%;
      width: 420px;
  padding: 20px;
 z-index: 99999;
  margin: 20px auto;
  font-size: 16px;
  background-color: #333333;
}
.desc{
  
    position: absolute;
    top: 140px;
    right: 48px;
    color: #d9d9d9;
    background:#800000;
    height: 29px;
    width: 29px;
    border-radius: 50%;
    padding: 9px;
    padding-top: 1px;
    border: 1px solid black;
}
.input {
   width: 364px;
    height: 63px;
    border-radius: 3%;
    border: 3px solid black;
    background-color: #B8B8B8;
    color: black;
    padding: 0 5px 0 5px;
    margin: 0 0px 10px 6px;
    font-size: 30px;

}

.input:focus,
.input:active {
  border-color: #f08519;
  box-shadow: 0 0 4px #03A9F4;
  outline: none 0;
}

.button {
  margin: 3px;
  width: 63px;
  border: 1px solid #606161;
  height: 30px;
  border-radius: 4px;
  color: #d9d9d9;
  background-color: #1a1a1a;
  cursor: pointer;
  outline: none;
  height: 39px;
  margin-bottom: 6px;
}
.button:first-child{
  background: #a1a1a1;
  color: #404040;
  border: 1px solid #1a1a1a;
}
.button:nth-child(2){
  background-color: #a1a1a1;
  color: #404040;
  border: 1px solid #1a1a1a;
  
}
.button:nth-child(3){
  background: #a1a1a1;
  color: #404040;
  border: 1px solid #1a1a1a;
}
.button:nth-child(4){
  background:#f08519;
  color: #404040;
  border: 1px solid #1a1a1a;
}
.button:nth-child(5){
  background:#f08519;
  color: #404040;
  border: 1px solid #1a1a1a;
}

.button:last-child{
  background: #1a1a1a;
}

.button:nth-child(21){
  /* width: 62px; */
  /* margin-left: 1px; */
}
.button:nth-child(22){
      margin-left: 1px;
    margin-right: 4px;
  
  /* margin-left:1px; */
}
.button:nth-child(23){
      margin-left: 1px;
    margin-right: 1px;
}
.button:nth-child(24){
     width: 142px;
    margin-right: 3px;
}
.mode {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
      margin-top: -14px;

}

.equal-sign {
  background-color: green;
  width: 133px;
}

.toggle-button {
  border: none;
  background-color: #333333;
  /* cursor: pointer; */
  outline: none;
  font-size: 1rem;
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);
  /* height: 28px;
    width: 391px;
    margin-top: -12px;
    margin-left: -9px; */
}

p {
  margin-top: 0;
}

button::-moz-focus-inner {
  border-color: transparent;
}

</style>
